<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="100px" class="app-content" ref="ruleForm" label-position='left'>
            <div class="box">
            <div class="appTitle">查看题库</div>    
                <el-row>
                    <div class="appTop appImp">
                        <el-col :span='11' class='mLeft'>知识点：<span v-if="tagList!=null && tagList.length > 0" v-for="(item,index) in tagList" class='tagList' :key="index"><span v-if="tagList.length > 1">{{index+1+'、'}}</span><span v-html="item"></span>&ensp;&ensp;</span><span v-if="tagList.length==null || tagList.length==0">暂无</span></el-col>
                        <el-col :span='5' class='mLeftSmall'>难易度：<span class='tagList'>{{difficult}}</span></el-col>
                        <el-col :span='5'>更新时间：<span class='tagList'>{{updateTime?updateTime.substring(0,updateTime.length-2):'--'}}</span></el-col>
                    </div>
                </el-row>

                <el-row>
                    <div class="appTop">
                        <el-col :span='5' class='mLeft'>题文</el-col>
                    </div>
                    <div class="textCon">
                        <el-col :span='22' class='mLeft' v-html='stem'></el-col>
                    </div>
                </el-row>

                <el-row>
                    <div class="appTop">
                        <el-col :span='5' class='mLeft'>答案</el-col>
                    </div>
                    <div class="textCon textAnswer">
                        <el-col :span='22' class='mLeft' v-if="type != '11' && type != '2' && type != '12'"><span v-for="(item,index) in answer" :key="index">答案<span v-if="answer.length > 1">{{index+1}}</span>： <span v-html="item.answer"></span>&ensp;&ensp;&ensp;&ensp;</span></el-col>
                        <el-col :span='22' class='mLeft' v-if="type == '11' || type == '12'"><div v-for="(item,index) in answer" :key="index"><span v-if="item.correct=='Y'" class="correct">✔</span><span v-if="item.correct=='N'" class="correct">✖</span>&ensp;答案 {{index+1+'： '}}<span v-html="item.answer"></span>&ensp;&ensp;&ensp;&ensp;</div></el-col>
                        <el-col :span='22' class='mLeft' v-if="type == '2'"><div v-for="(item,index) in answer" :key="index">答案：<span v-if="item.answer=='1'" class="correct">✔</span><span v-if="item.answer=='0'" class="correct">✖</span></div></el-col>
                    </div>
                </el-row>

                <el-row>
                    <div class="appTop">
                        <el-col :span='5' class='mLeft'>解析</el-col>
                    </div>
                    <div class="textCon">
                        <el-col :span='22' class='mLeft' v-html='analyze'></el-col>
                    </div>
                </el-row>

                <el-form-item class="footer">
                    <el-button @click="resetForm">返回</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import Levelbar from '../../layout/Levelbar';
import {getQuestionInfo} from 'api/teaching';
export default{
    name: 'checkItemBank',
    components: { Levelbar},
    data() {
        return { 
            difficult: '', // 难易
            stem: '', // 题干
            tagList: [], // 题型
            answer: [], // 答案
            analyze: '', // 解析
            updateTime: '', // 更新时间
            type: ''
        }
    },
    created() {
        this.getInfo();
    },
    methods: {
        // 提交
        getInfo() {
            getQuestionInfo(this.$route.params.subId, this.$route.params.id).then(res => {
                this.difficult = res.data.content.difficult;
                this.stem = this.getLinkStr(res.data.content.stem).replace(/<ol>/g, '<ol style="list-style:none">').replace(/<ul>/g, '<ul style="list-style:none">');
                this.tagList = this.getLinkList(res.data.content.tagList);
                this.type = res.data.content.type;
                this.answer = this.getLinkListJSon(res.data.content.answer);
                this.analyze = res.data.content.analyze !== null ? this.getLinkStr(res.data.content.analyze) : '暂无';
                this.updateTime = res.data.content.updateTime;
            })
        },
        getLinkStr(str) {
            if (!str) {
                return ''
            }
            let pattern =new RegExp('\\[LaTeXI](.| )+?\\[/LaTeXI]');
            let start = str.indexOf('[LaTeXI]');
            let end = str.indexOf('[/LaTeXI]');
            if (start > -1) {
                str = str.replace(pattern, '<img src="http://gs.xueleyun.com//cgi-bin/mathtex.cgi?' + str.substring(start+8, end)+'">');
                return this.getLinkStr(str)
            } else {
                return str
            }
        },
        getLinkList(arr) {
            if (arr.length==0) {
                return [];
            }
            let arrList = [];
            arr.forEach(item => {
                arrList.push(this.getLinkStr(item))
            })
            return arrList;
        },
        getLinkListJSon(arr) {
            if (arr.length==0) {
                return [];
            }
            let arrList = [];
            arr.forEach(item => {
                arrList.push({
                    answer: this.getLinkStr(item.answer),
                    correct: item.correct
                })
            })
            return arrList;
        },
        resetForm() {
            window.history.back();
        }
    }
}

</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        .box{
            padding:0 50px;
        }
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding-bottom:50px;
        .appTop{
            padding:40px 0 50px 0px;
            font-size: 14px;
            .mLeft{
                margin-left:15px;
                img {
                    padding: 0 10px !important;
                }
                ul,li,ol{
                    list-style: none;
                }
            }
            .mLeftSmall{
                margin-left:6px;
            }
        }
        .el-row .appImp{
            padding:80px 0;
        }
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .appTop:before {
            content: '';           
            float: left;
            border-radius: 2px;
            width:4px;
            height:15px;
            background:#ff5e2c;
            margin-top:2px;
        }
        .textCon{
            margin-left:70px;
            font-size: 14px;
            line-height: 44px;
            color: #676767;
            .mLeft{
                list-style: none;
                ul,li,ol{
                    list-style: none;
                }
            }
        }
        .footer {
            text-align: center;
            margin-top: 60px;
        }
    }
    .dialog-footer{
        .el-button{
            margin: 20px 0 10px 0;
        }
        text-align: center;
    }
    .textCon{
        min-height:80px;
    }
    .tagList{
        font-size: 14px;
        color: #676767;
    }
    .correct{
        color:#ff5e2c
    }
}

</style>
